<script setup>
import { getRoleList } from '@/apis/role';
import { onMounted, ref } from 'vue';
import { getPermissionTree,getPermissionIdsAPI, addRolePermissionAPI } from '@/apis/permission';
import { ElMessage } from 'element-plus';

const roleList = ref([])
// 请求数据列表参数
const parms = ref({
  page: 0,
  pageSize: 10000,
  currentPage: 1,
  total: 0,
  key: "",
});
// 获取用户列表
const getRoleData = async()=>{
  const res = await getRoleList(parms.value)
  roleList.value = res.data
  getPermissionData()
}
const treeData = ref([])
const getPermissionData = async()=>{
  const res = await getPermissionTree(parms.value)
  treeData.value = res.children
}
onMounted(()=>{
  getRoles()
})

let roleId = ref(0)
const selectRole = (id)=>{
  roleId.value = id
  getPermissionIds(id)
}

// 获取已授权的列表
const getPermissionIds = async(rid)=>{
  assignBtns.value=[]
  let parm={rid}
  const res = await getPermissionIdsAPI(parm)
  assignBtns.value = res.assignbtns
  treeRef.value.setCheckedKeys(res.permissionids)
}

const treeRef = ref(null)
const assignBtns = ref([])

// 点击刷新
const getRoles = ()=>{
  getRoleData()
}

// 反选
const reverse = (btns)=>{
  // console.log(btns);
  // for (let i = 0; i < btns.length; i++) {
  //   let btn = btns[i];
  //   let findBtnIndex = assignBtns.value.findIndex(i=>i==btn.value)
  //   if(findBtnIndex>-1){
  //     assignBtns.value.splice(findBtnIndex,1)
  //   }else{
  //     assignBtns.value.push(''+btn.value)
  //   }
  // }
  // btns.forEach(item=>{
  //   let findBtnIndex=assignBtns.value.findIndex(i=>i==item.value)
  //   if(findBtnIndex>-1){
  //     assignBtns.value.splice(findBtnIndex,1)
  //   }else{
  //     assignBtns.value.push(item.value)
  //   }
  // })
  for (const btn of btns) {
    let index = assignBtns.value.findIndex(i=>i==btn.value)
    if(index>-1) assignBtns.value.splice(index,1)
    else assignBtns.value.push(btn.value)
  }
}

// 保存
const saveAssign = async()=>{
  let pids = treeRef.value.getCheckedKeys()
  let saveArray=[...pids]
  let para={pids:saveArray,rid:roleId.value}
  if(!roleId.value){
    ElMessage.warning('请选择角色')
    return false
  }
  if(pids.length<=0){
    ElMessage.warning('请选择页面')
    return false
  }
  if(assignBtns.value.length>0){
    saveArray.push(...assignBtns.value)
  }else{
    ElMessage.warning('请选择操作按钮')
    return false
  }
  const res = await addRolePermissionAPI(para)
  ElMessage.success(res)
  getPermissionIds(roleId.value)
  ElMessage.success("更新数据成功")
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="titleAndButton">
            <span>权限</span>
            <el-button @click="getRoles" link type="primary">刷新</el-button>
          </div>
        </template>
        <div v-for="item in roleList" class="roleItem" :class="item.id==roleId?'active':''" @click="selectRole(item.id)" :key="item.id">
          {{ item.name }}</div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card>
        <div class="titleAndButton">
          <span>菜单</span>
          <el-button link type="primary" @click="saveAssign">保存</el-button>
        </div>
        <div>
          <el-tree :data="treeData" show-checkbox node-key="value" ref="treeRef" default-expand-all :expand-on-click-node="true"
                   :check-strictly="true">
            <template #default="{node,data}">
              <span class="custom-tree-node">
                <span>{{ node.label }}
                  <el-button v-if="(data.btns&&data.btns.length>=1)" size="small" @click="reverse(data.btns)">反选</el-button>
                </span>
                <el-checkbox-group v-model="assignBtns">
                  <el-checkbox v-for="btn in data.btns" :key="btn.value" :label="btn.label.toString()" :value="btn.value"></el-checkbox>
                </el-checkbox-group>
              </span>
            </template>
          </el-tree>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss">
.el-row {
  margin-top: 10px;
  .titleAndButton {
    display: flex;
    justify-content: space-between;
    align-content: center;
    span {
      display: block;
      line-height: 32px;
    }
  }
  .roleItem {
    cursor: pointer;
    padding: 10px;
    font-size: 14px;
    &:hover {
      background: #ebf5ff;
    }
    &.active {
      background: #ebf5ff;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>